<!--
 * @Description: 抽出来的自定义控件的查询条件组件 
 * @Author: 马山
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-03-19 12:43:55
 * @LastEditors: 马山
 -->

<template> 
    
    <div class="query-form">
        <div class="item" v-for="(item,index) in queryListArray" :key="index">

            <!-- 时间类型 -->
            <div class="date-input" v-if="item.type == 'date'">
                <div class="title">{{ item.title }}</div>
                <!-- 组合选择日期 -->
                <el-date-picker size="mini"
                v-if="item.group"
                v-model="item.value"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
                <!-- 单独选择日期 -->
                <el-date-picker size="mini"
                v-else
                v-model="item.value"
                value-format="yyyy-MM-dd"
                type="date">
                </el-date-picker>
            </div>
            <!-- 年月日时分类型 -->
            <div class="date-input" v-else-if="item.type == 'dateTime'">
                <div class="title">{{ item.title }}</div>
                <!-- 组合选择日期 -->
                <el-date-picker size="mini"
                v-if="item.group"
                v-model="item.value"
                type="datetimerange"
                range-separator="至"
                value-format="yyyy-MM-dd HH-mm-ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
                <!-- 单独选择日期 -->
                <el-date-picker size="mini"
                v-else
                v-model="item.value"
                value-format="yyyy-MM-dd HH-mm-ss"
                type="datetime">
                </el-date-picker>
            </div>
            <!-- 选择类型 -->
            <div class="select-input" v-else-if="item.type == 'select'">
                <div class="title">{{ item.title }}</div>
                <el-select v-model="item.value" placeholder="请选择" size="mini">
                    <el-option
                    v-for="cell in item.options"
                    :key="cell.value"
                    :label="cell.label"
                    :value="cell.value">
                    </el-option>
                </el-select>
            </div>
            <!-- 纯文本类型 -->
            <div class="text-Input" v-else>
                <div class="title">{{ item.title }}</div>
                <el-input size="mini"
                :clearable="true"
                :type="item.type" 
                v-model="item.value" 
                placeholder="请输入" @keyup.enter.native="submit"></el-input>
            </div>
        </div>
        <div class="query-footer">
            <el-button class="submit" type="primary" @click="submit" size="mini" >搜索</el-button>
            <el-button class="reset" type="info" @click="reset" size="mini" >重置</el-button>
        </div>
    </div>


</template>

<script>
export default {
    name:"query-form",
    props:{
        queryList:{
            type: Array,
            required: true,
            default: []
        }
        // 参数列表
        // queryList:[
        //     {
        //         type:"text", //普通文本框
        //         text:"标题", //文本框前面显示的文本
        //         value:"11111", //默认值
        //         key:"0"   //当前下标
        //     },
        //     {
        //         type:"number", //数字文本框
        //         text:"数字",
        //         value:"2222222",
        //         key:"0"
        //     },
        //     {
        //         type:"date",  //时间选择(年月日)
        //         text:"时间1",
        //         value:"2020-10-03", //格式强制规范
        //         key:"0"
        //     },{
        //         type:"date",  //时间选择(年月日)
        //         text:"时间2",
        //         value:["2020-10-04","2020-10-09"], //格式强制规范
        //         key:"0",
        //         group:true   //组合选择(开始日期和结束日期)，只在时间选择类型内触发
        //     },{
        //         type:"select", //下拉选择
        //         text:"选择",
        //         value:"",
        //         key:"0",
        //         options:[ //子数据
        //             {value:"0",label:"选择1"},
        //             {value:"1",label:"选择2"}
        //         ]
        //     }
        // ]
    },
    computed:{},
    data: () => ({

        queryListArray :[
            {
                type:"",
                text:"",
                value:"",
                key:"", //当前下标
                group:false //时间选择才带入这个参数，代表是否组合选择开始和结束时间。此时value需要传递数组
            }
        ]
    }),
    created() {
        this.queryListArray = JSON.parse(JSON.stringify(this.queryList));//
    },
    mounted() {
        
    },
    watch: {},
    methods:{
        // 执行提交
        submit(){
            console.log("执行提交");
            let dataArray = [];
            this.queryListArray.forEach( item =>{
                let data = {
                    key:item.key,
                    value:item.value,
                    title:item.title
                }
                dataArray.push(data);
            });
            this.$emit("submit",dataArray);
        },
        // 执行重置
        reset(){
            console.log("执行重置");
            // this.queryList.forEach( (item,index) =>{
            //     console.log(item)
            //     this.queryListArray[index].value = item.value;
            // });
            for(let i=0,len=this.queryList.length;i<len;i++){
                let item = this.queryList[i];
                this.queryListArray[i].value = item.value;
            }
        }
    }
};
</script>

<style lang="scss" >
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }


.query-form{
    background-color:rgba(173, 184, 212, 0.15);
    padding:10px 0 10px 5px;
    .item{
        display:inline-block;
        margin-bottom: 10px;
        .el-input{
            width:140px;
            .el-input__inner{
                height:30px;
                font-size: 12px;
            }
            .el-input__icon{
                line-height:29px;
            }
        }
        .title{
            color:#324558;
            font-size:12px;
            // width:80px;
            height:30px;
            line-height: 27px;
            text-align:center;
            display:inline-block;
            vertical-align: middle;
            padding: 0 15px;
        }
        .date-input,.select-input,.text-Input{
            vertical-align: middle;
        }
        // 时间文本框样式控制
        .date-input{
            .el-date-editor--datetime{
                width:180px!important;
            }
            .el-date-editor{
                width:310px;
                height:30px;
                .el-range__close-icon,.el-range__icon,.el-range-separator{
                    line-height:23px;
                }
                .el-range-separator{
                    padding:0;
                }
                .el-range-input{
                    font-size: 12px;
                }
            }
        }
        // 选择文本框样式控制
        .select-input{
            .el-select{
                width: auto;
            }
        }
    }
    .query-footer{
        width:100%;
        text-align:center;
    }
}


</style>

